<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="backText">返回</block>
			<block slot="content">武将进化材料</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-white nav" style="width: 100%; position: fixed;z-index: 100;">
			<view class="flex text-center">
				<view v-for="(item,index) in country" :class="index==TabCur?'text-orange cur':''"
					class="cu-item flex-sub" @click="tabSelect(index)">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<view style="height: 40px;"></view>
		<view>
			<view v-for="item in list" :key='item._id' style="width: 700rpx; margin: 10px auto;" class="padding radius bg-brown light">
				<view class="text-center text-bold">{{item.name}}</view>
				<view class="margin-top-sm" v-if="Object.keys(item.orange).length > 0">
					<view class="text-bold text-orange">橙卡:</view>
					<view class="flex padding-lr-xs margin-top-sm justify-between">
						<view class='cu-tag radius bg-orange'>进化石: {{item.orange.jhs}}</view>
						<view class='cu-tag radius bg-orange'>{{item.orange.wj}}</view>
					</view>
				</view>
				<view class="margin-top-sm" v-if="Object.keys(item.red).length > 0">
					<view class="text-bold text-red">红卡:</view>
					<view class="flex padding-lr-xs margin-top-sm flex-wrap justify-between">
						<view class='cu-tag radius bg-red margin-tb-xs'>进阶丹: {{item.red.jjd}}</view>
						<view class='cu-tag radius bg-red margin-tb-xs'>进化石: {{item.red.jhs}}</view>
						<view class='cu-tag radius bg-red margin-tb-xs'>真进化石: {{item.red.zjhs}}</view>
						<view class='cu-tag radius bg-red margin-tb-xs' >精华: {{item.red.zjhs}}</view>
					</view>
				</view>
				<view class="margin-top-sm" v-if="Object.keys(item.gold).length > 0">
					<view class="text-bold text-yellow">金卡:</view>
					<view class="flex padding-lr-xs margin-top-sm flex-wrap justify-between">
						<view class='cu-tag radius bg-yellow margin-tb-xs'>进阶丹: {{item.gold.jjd}}</view>
						<view class='cu-tag radius bg-yellow margin-tb-xs'>真进化石: {{item.gold.zjhs}}</view>
						<view class='cu-tag radius bg-yellow margin-tb-xs'>圣进化石: {{item.gold.sjhs}}</view>
						<view class='cu-tag radius bg-yellow margin-tb-xs'  v-if="item.gold.jzjd">九转金丹: {{item.gold.jzjd}}</view>
						<view class='cu-tag radius bg-yellow margin-tb-xs'>精华: {{item.gold.jh}}</view>
					</view>
				</view>
				<view class="margin-top-sm" v-if="Object.keys(item.dark_gold).length > 0">
					<view class="text-bold">暗金卡:</view>
					<view class="flex padding-lr-xs margin-top-sm flex-wrap justify-between">
						<view class='cu-tag radius bg-brown margin-tb-xs'>金魂: {{item.dark_gold.jhun}}</view>
						<view class='cu-tag radius bg-brown margin-tb-xs'>精华: {{item.dark_gold.jh}}</view>
						<view class='cu-tag radius bg-brown margin-tb-xs'>神进化石: {{item.dark_gold.shjhs}}</view>
						<view class='cu-tag radius bg-brown margin-tb-xs' >圣进化石: {{item.dark_gold.sjhs}}</view>
						<view class='cu-tag radius bg-brown margin-tb-xs'>九转金丹: {{item.dark_gold.jzjd}}</view>
					</view>
				</view>
				<view class="margin-top-sm" v-if="Object.keys(item.platinum).length > 0">
					<view class="text-bold text-gray">白金卡:</view>
					<view class="flex padding-lr-xs margin-top-sm flex-wrap justify-between">
						<view class='cu-tag radius bg-gray margin-tb-xs'>白金魂: {{item.platinum.bjh}}</view>
						<view class='cu-tag radius bg-gray margin-tb-xs'>金魂: {{item.platinum.jhun}}</view>
						<view class='cu-tag radius bg-gray margin-tb-xs'>精华: {{item.platinum.jh}}</view>
						<view class='cu-tag radius bg-gray margin-tb-xs'>真神进化石: {{item.platinum.zsjhs}}</view>
						<view class='cu-tag radius bg-gray margin-tb-xs' >神进化石: {{item.platinum.shjhs}}</view>
						<view class='cu-tag radius bg-gray margin-tb-xs'>九转金丹: {{item.platinum.jzjd}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import getEvolution from "@/common/evolution.js"
	export default {
		data() {
			return {
				country: ["魏", "蜀", "吴", "群"],
				TabCur: 0,
				wei: [],
				shu: [],
				wu: [],
				qun: [],
				list: []
			}
		},
		onLoad() {
			this.getEvolution()
		},
		methods: {
			tabSelect(index) {
				this.TabCur = index
				if(this.TabCur == 0) {
					this.list = this.wei
				}else if(this.TabCur == 1) {
					this.list = this.shu
				}else if(this.TabCur == 2) {
					this.list = this.wu
				}else {
					this.list = this.qun
				}
			},

			getEvolution() {
				uni.showLoading({
					title: "数据加载中~"
				})
			
				getEvolution().forEach((item, index) => {
					if (item.country == "魏") {
						this.wei.push(item)
					} else if (item.country == "蜀") {
						this.shu.push(item)
					} else if (item.country == "吴") {
						this.wu.push(item)
					} else {
						this.qun.push(item)
					}
				})
				this.list = this.wei
				this.adOption = {
					adUnitId: 'adunit-4ce181ffaad212fe'
				};
				// 创建广告实例
				this.createInterstitialAd();
				uni.hideLoading()
			},
			createInterstitialAd() {
				var interstitialAd = this.interstitialAd = uni.createInterstitialAd(this.adOption);
				interstitialAd.onLoad(() => {
					this.showInterstitialAd()
				});
			},
			showInterstitialAd() {
				this.interstitialAd.show().then(() => {});
			}
		}
	}
</script>

<style>
	.cu-tag+.cu-tag {
	    margin-left: 0rpx;
	}
</style>
